﻿@model CountriesModel
@{
    ViewBag.Title = "Options";
}

<h2>Options</h2>

<p>The value binding links the associated DOM element’s value with a property on your view model. This is typically useful with form elements such as &lt;input&gt;, &lt;select&gt; and &lt;textarea&gt;.</p>
<p><a href="http://knockoutjs.com/documentation/value-binding.html" target="_blank">http://knockoutjs.com/documentation/value-binding.html</a></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.OPTIONS_VIEW_MODEL, Html.CreateVisiToggler("show the samples view model C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))
<br />
@Html.VisiTogglerFromPartial(CodeSamplePartials.OPTIONS_CONTROLLER, Html.CreateVisiToggler("show the samples controller C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))


<h3>Sample #1</h3>
<p>Destination country: <select @Html.KoAttrOptions(m => m.AvailableCountries).KoAttrValue(m => m.SelectedCountry)></select></p>
<p>Selected destination country: <span @Html.KoAttrText(m => m.SelectedCountry)></span></p>

<p>Add "China" to the list <input type="button" onclick="@(KoHelper.GetRootContext() + "." + Html.ArrayPush(m => m.AvailableCountries, "China"))" value="Add"/> </p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.OPTIONS1, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<h3>Sample #2</h3>
<p>Choose some countries you'd like to visit: <select @Html.KoAttrOptions(m => m.AvailableCountries).KoAttrValue(m => m.SelectedCountries) size="5" multiple="true"></select></p>

<p>Countries you like to visit: <span @Html.KoAttrText(m => m.SelectedCountries)></span></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.OPTIONS2, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<h3>Sample #3</h3>

<p>
    Your country: 
    <select @Html.KoAttrOptions(m => m.AvailableCountries2, textExpression: t => t.CountryName + " (pop: " + t.CountryPopulation + ")", caption: "Choose..." ).KoAttrValue(m => m.SelectedCountry2)></select>
</p>
 
<div @Html.KoAttrVisible(m => m.SelectedCountry2)>
    You have chosen a country with population 
    <span @Html.KoAttrText(m => m.SelectedCountry2)></span>.
</div>


@Html.VisiTogglerFromPartial(CodeSamplePartials.OPTIONS3, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))


<p>Will be updated soon ...</p>

<p>&nbsp;</p>
<p>Next &gt; @Html.ActionLink("Selected Options", "SelectedOptions", "Examples")</p>


@Model.ApplyBindingsScript(KoBindingOptions.IncludeData)